<!--
 * @Author: hifishroom
 * @Date: 2021-10-18 15:42:37
 * @LastEditTime: 2022-03-25 13:52:51
 * @FilePath: \my-ts\src\components\content\banner\Banner.vue
-->
<template>
  <div class="banner">
    <div class="textbox">
      <h2>WELCOME</h2>
      <p>TO</p>
      <h2>FISHROOM</h2>
    </div>
    <img
      src="~@/assets/image/index-banner.jpg"
      alt=""
      class="index-banner-img"
    />
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Banner",
});
</script>

<style lang="stylus">
.banner
  position relative
  width 100%
  height 100vh
  .index-banner-img
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    opacity .7
  .textbox
    position: absolute
    top: 20%
    left: 20%
    transform: rotate(-10deg);
    color: white
    z-index 98
    p
      font-size: 60px
      text-align: center
      font-family: "Caesar Dressing", cursive;
    h2
      font-size: 80px
      font-family: "Caesar Dressing", cursive
      font-weight: 400
      padding-left: 30px
      line-height: 1
</style>
